import React from 'react';

interface SegmentElementProps {
    segment: any;
    trackType: string;
    draftData: any;
}

const SegmentElement: React.FC<SegmentElementProps> = ({ segment, trackType, draftData }) => {
    // 获取素材信息 - 使用新的数据结构
    const material =
        segment.material_info ||
        draftData?.script_content?.materials?.videos?.find((video: any) => video.id === segment.material_id) ||
        draftData?.script_content?.materials?.texts?.find((text: any) => text.id === segment.material_id);

    // 计算时间范围（转换为秒）
    const duration = segment.target_timerange.duration / 1000000;

    // 计算位置和变换
    const position = {
        x: segment.clip.transform.x * 100, // 转换为百分比
        y: segment.clip.transform.y * 100,
    };
    const alpha = segment.clip.alpha;
    // 根据轨道类型渲染不同的元素
    const renderElement = () => {
        if (trackType === 'video') {
            if (material?.type === 'photo') {
                return (
                    <div className="segment-element photo-element">
                        <div className="element-icon">📷</div>
                        <div className="element-info">
                            <div className="element-name">图片</div>
                            <div className="element-duration">{duration.toFixed(1)}s</div>
                        </div>
                    </div>
                );
            } else {
                return (
                    <div className="segment-element video-element">
                        <div className="element-icon">🎬</div>
                        <div className="element-info">
                            <div className="element-name">视频</div>
                            <div className="element-duration">{duration.toFixed(1)}s</div>
                        </div>
                    </div>
                );
            }
        } else if (trackType === 'text') {
            return (
                <div className="segment-element text-element">
                    <div className="element-icon">📝</div>
                    <div className="element-info">
                        <div className="element-name">文本</div>
                        <div className="element-duration">{duration.toFixed(1)}s</div>
                    </div>
                </div>
            );
        }
        return null;
    };

    return (
        <div
            className="segment-container"
            style={{
                position: 'absolute',
                left: `${position.x}%`,
                top: `${position.y}%`,
                opacity: alpha,
                pointerEvents: 'auto',
                cursor: 'pointer',
            }}
        >
            {renderElement()}
        </div>
    );
};

export default SegmentElement;
